<template>
  <div class="screen-box">
    <div class="screen-root">
      <div class="screen" id="screen">
        <div class="header-navi">
          <!-- <img src="../assets/static/head_bg.png"/> -->
          <span class="header-title">大数据平台</span>
        </div>
        <div class="container">
          <div class="vw-left">
            <div class="vw-left-top">
              <div class="vw-left-item">
                <e-charts :option="option" />
              </div>
              <div class="vw-left-item">
                <e-charts :option="option_1" />
              </div>
            </div>
            <div class="vw-left-top">
              <e-charts :option="option_3" />
            </div>
            <div class="vw-left-top">
              <e-charts :option="option_2" />
            </div>
          </div>
          <div class="vw-center">
            <div class="vw-left-item-center">
              <ChinaMap />
            </div>
            <div class="vw-left-item-center-bottom">
              <div class="table-header">
                <div class="header">
                  <el-row>
                    <el-col :span="6" class="center">
                      <div>车次</div>
                    </el-col>
                    <el-col :span="6" class="center">
                      <div>目的地</div>
                    </el-col>
                    <el-col :span="6" class="center">
                      <div>发车时间</div>
                    </el-col>
                    <el-col :span="6" class="center">
                      <div>状态</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <div style="width: 100%;height: 300px;">
                <vue3ScrollSeamless class="scroll-wrap border text-color" :classOptions="classOptions" :dataList="list">
                <div v-if="list.length > 0">
                  <el-row v-for="(item, i) of list" :key="i">
                    <el-col :span="6" class="center">
                      <div>{{ item.trainNumber }}</div>
                    </el-col>
                    <el-col :span="6" class="center">
                      <div>{{ item.destination }}</div>
                    </el-col>
                    <el-col :span="6" class="center">
                      <div style="width: 30px;">{{ item.departureTime }}</div>
                    </el-col>
                    <el-col :span="6" class="center">
                      <div style="width: 30px;">{{ item.status }}</div>
                    </el-col>
                  </el-row>
                </div>
                <div v-if="list.length == 0"
                  style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;">
                  暂无预测记录</div>
              </vue3ScrollSeamless>
              </div>
            </div>
          </div>
          <div class="vw-right">
            <div class="vw-left-top">
              <e-charts :option="option_3" />
            </div>
            <div class="vw-left-top">
              <e-charts :option="option_2" />
            </div>
            <div class="vw-left-top">
              <div class="vw-left-item">
                <e-charts :option="option" />
              </div>
              <div class="vw-left-item">
                <e-charts :option="option_1" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { onMounted } from 'vue'
import echart0 from '@/dataUtil/echart0'
const option = ref(echart0.option)

import echart1 from '@/dataUtil/echart1'
const option_1 = ref(echart1.option)

import echart2 from '@/dataUtil/echart2'
const option_2 = ref(echart2.option)

import echart3 from '@/dataUtil/echart3'
const option_3 = ref(echart3.option)

import ChinaMap from '../components/ChinaMap.vue'
import { vue3ScrollSeamless } from "vue3-scroll-seamless";

const list = reactive([
  { trainNumber: 'G1234', destination: '北京南', departureTime: '09:00', status: '准点' },
  { trainNumber: 'G5678', destination: '上海虹桥', departureTime: '09:15', status: '准点' },
  { trainNumber: 'D4321', destination: '广州南', departureTime: '09:30', status: '晚点' },
  { trainNumber: 'G8765', destination: '成都东', departureTime: '09:45', status: '准点' },
  { trainNumber: 'G9876', destination: '西安北', departureTime: '10:00', status: '准点' },
  { trainNumber: 'D6543', destination: '深圳北', departureTime: '10:15', status: '准点' },
  { trainNumber: 'G2345', destination: '重庆北', departureTime: '10:30', status: '晚点' },
  { trainNumber: 'G1111', destination: '天津西', departureTime: '10:45', status: '准点' },
  { trainNumber: 'G2222', destination: '南京南', departureTime: '11:00', status: '晚点' },
  { trainNumber: 'D3333', destination: '杭州东', departureTime: '11:15', status: '准点' },
  { trainNumber: 'G4444', destination: '武汉', departureTime: '11:30', status: '准点' },
  { trainNumber: 'G5555', destination: '济南西', departureTime: '11:45', status: '准点' },
  { trainNumber: 'D6666', destination: '长沙南', departureTime: '12:00', status: '晚点' },
  { trainNumber: 'G7777', destination: '南昌西', departureTime: '12:15', status: '准点' },
  { trainNumber: 'G8888', destination: '沈阳北', departureTime: '12:30', status: '准点' },
  { trainNumber: 'D9999', destination: '福州南', departureTime: '12:45', status: '准点' },
  { trainNumber: 'G1010', destination: '哈尔滨西', departureTime: '13:00', status: '晚点' }
  
]);
const classOptions = reactive({
  step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
  limitMoveNum: list.length,//无缝滚动列表元素的长度，一般设置为列表的长度
  direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
  
});

onMounted(() => {
  // 初始化自适应  ----在刚显示的时候就开始适配一次
  handleScreenAuto();
  // 绑定自适应函数   ---防止浏览器栏变化后不再适配
  window.onresize = () => handleScreenAuto();

  // getHeaderKey().then((res) => {
  //   console.log(res.data)
  // })
})

// 数据大屏自适应函数
const handleScreenAuto = () => {
  const designDraftWidth = 1920; //设计稿的宽度
  const designDraftHeight = 960; //设计稿的高度
  // 根据屏幕的变化适配的比例
  const scale =
    document.documentElement.clientWidth /
      document.documentElement.clientHeight <
      designDraftWidth / designDraftHeight
      ? document.documentElement.clientWidth / designDraftWidth
      : document.documentElement.clientHeight / designDraftHeight;
  // 缩放比例
  document.querySelector(
    '#screen',
  ).style.transform = `scale(${scale}) translate(-50%, -50%)`;

}

</script>
<style lang="scss">
/*
  除了设计稿的宽高是根据您自己的设计稿决定以外，其他复制粘贴就完事
*/
.screen-box {
  width: 100vw;
  height: 100vh;
  background-color: black;
}

/*
  除了设计稿的宽高是根据您自己的设计稿决定以外，其他复制粘贴就完事
*/
.screen-root {
  height: 100%;
  width: 100%;

  .screen {
    width: 1920px; //设计稿的宽度
    height: 1080px; //设计稿的高度
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-block;
    background-image: url(/src/assets/static/bg.jpg);
  }
}

.header-navi {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('../assets/static/head_bg.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.header-title {
  font-size: 30px;
  font-weight: 500;
  color: white;
}

.container {
  width: 100%;
  height: 980px;
  display: flex;
}

.vw-left {
  width: 33.33%;
  height: 100%;
}

.vw-left-top {
  width: 100%;
  height: 33.33%;
  display: flex;
}

.vw-left-item {
  width: 50%;
  height: 100%;
}

.vw-left-item-center {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.vw-left-item-center-bottom {
  width: 100%;
  height: 50%;
  overflow: hidden;
}

.vw-center {
  width: 33.33%;
  height: 100%;
}

.vw-right {
  width: 33.33%;
  height: 100%;
}

.scroll-wrap {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
  background-color: rgb(0, 5, 38, 0.5);
  font-size: 15px;
}

.table-header {
  font-family: Arial, sans-serif;
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid rgb(13, 162, 221);
  background-color: rgba(3, 137, 174, 0.5);
  width: 100%;
}

.header {
  width: 100%;
  font-size: 16px;
}

.border {
  border: 1px solid rgb(13, 162, 221);
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;

}

.text-color {
  color: rgb(128, 250, 124);
}
</style>